 <template>
   <Card :shadow="shadow">
      <div class="card-name">
        <div class="name">放行调度</div>
      </div>
      <i-form ref="formValidate" :model="formValidate" :rules="ruleValidate" class="content-con">
        <Form-item prop="radio" class="form-item">
          <Row :gutter="16">
            <i-col span="12">
              <Row>
                <i-col span="8" class="ban-left">
                  代付自动放行
                </i-col>
                <i-col span="16">
                  <Radio-group v-model='formValidate.radio'  style="padding: 3px 0 0 20px;">
                    <Radio size="large" label="open">启用</Radio>
                    <Radio size="large" label="close">停止</Radio>
                  </Radio-group>
                </i-col>
              </Row>
            </i-col>
          </Row>
        </Form-item>
        <Form-item class="ban-btn">
          <i-button @click="handleSubmit('formValidate')" class="save" size="large">保存</i-button>
          <i-button class="save" size="large" @click="btnClick1">返回</i-button>
        </Form-item>
      </i-form>
   </Card>

 </template>
 <script>
 import axios from "../../libs/axios.js";
 export default {
   name: 'mer-dispatch',
   props:{
     shadow: {
       type: Boolean,
       default: false
     }
   },
   data() {
     return {
       formValidate:{
         radio: ''
       },
       ruleValidate:{
         radio:[
           {
             required: true,
             message: '请选择状态',
             trigger: 'change'
           }
         ]
        }
     };
   },
   methods: {
     // 返回按钮
     btnClick1(){
       this.$router.push({name:'merchants'})
     },
     // changeModel(newval) {
     //      if (newval === 'close') {
     //         this.model.planType = ''
     //      }@on-change="changeModel"
     //   },

     handleSubmit () {
       this.$refs['formValidate'].validate((valid) =>{
         if (valid) {
           this.$Message.success('提交成功!');
         } else {
           this.$Message.error('表单验证失败!');
         }
       })
     }
   }
 };
 </script>
 <style lang="less">
   .card-name{
       height: 42px;
       border-bottom: 1px solid #f6f6f6;
         .name{
           margin: 0 15px;
           padding: 0;
           width: 65px;
           text-align: center;
           line-height: 42px;
           border-bottom: 2px solid #5FB878;
         }
     }
     .ivu-input{
       border-radius: 0 2px 2px 0;
     }
     .content-con{
       margin: 15px 15px 0px 15px;
       // .bank-form{
         .form-item{
           .ban-left{
             padding: 8px 15px;
             height: 36px;
             font-size: 16px;
             line-height: 20px;
             border-width: 1px;
             border-style: solid;
             border-radius: 2px 0 0 2px;
             text-align: center;
             background-color: #FBFBFB;
             border: 1px solid #dcdee2;
             overflow: hidden;
             white-space: nowrap;
             text-overflow: ellipsis;
             box-sizing: border-box;
            }
          }
        // }
        .ban-btn{
          padding-left: 110px;
          .save{
            background-color: rgb(0, 150, 136);
            color: white;
            white-space: nowrap;
            text-align: center;
            font-size: 14px;
            border: none;
            border-radius: 2px;
            cursor: pointer;
            display: inline-block;
            height: 38px;
            line-height: 38px;
            padding: 0 18px;
            margin-right: 15px;
          }
        }
       .page{
         position: relative;
         width: 100%;
         padding: 7px 7px 0;
         height: 41px;
         font-size: 12px;
         // overflow: hidden;
         border-bottom: 1px solid #dcdee2;
         border-left: 1px solid #dcdee2;
         border-right: 1px solid #dcdee2;
       }
     }
 </style>
